Teckensnitt
Egenskap Värde XHTML element Arv % Beskrivning Exempel
Font caption, icon, menu, message-box, small-caption, status-bar plus nedan stående värden Alla element Ja Se nedan Teckensnittets egenskaper som bestämmer font-family, font-size, font-variant, font-style font-weight, font-line och font-heigt. font: arial,sans-serif,16pt, oblique
Font-family <family-name>
<generic-family>
 Alla element Ja - Används för att bestämma teckensnittet på ord
font-family:Arial
font-family:fantasy
font-family:comic
font-family:Georgia
Font-stretch normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, extra-expanded ,ultra-expanded. Alla element Ja - Bestämmer bredden på de olika tecknerna font-stretch: wider
font-stretch: narrower
font-stretch: ultra-condensed
font-stretch: extra-condensed
font-stretch: condensed
font-stretch: semi-condensed
font-stretch: semi-expanded
font-stretch: expanded
font-stretch: extra-expanded
font-stretch: ultra-expanded
font-size <absolute-size>
<relativ-size>
<length>
<percentage>
 Alla element Ja Relativ parent Anger storleken på teckensnittet
font-size:8pt
font-size:5mm
font-size:21px
font-size:4pc
font-size-adjust none <number> Alla element Ja - används för att bibehålla samma höjd som den font som man har använt tidigare. Stöds inte av IE och Mozilla
font-size-adjust:0.58
font-style
normal
italic
oblique
 Alla element Ja - Sätter stilen på fonten
font-style:italic
font-style:oblique
font-variant normal
small-caps
 Alla element Ja - Bestämmer om om texten ska ha small-caps font eller en normal font
font-variant:small-caps
font-weight normal
bold
bolder
lighter
1000
200
300
400
500
600
700
800
900
 Alla element Ja - Sätter tyngden på en font
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:200
font-weight:300
font-weight:400
font-weight:500
font-weight:600
font-weight:700
font-weight:800
font-weight:900
Text
Egenskap Värde XHTML element Arv % Beskrivning Exempel
later-spacing normal
<lenght>
 Alla element Ja - Bestämmer avståndet mellan bokstäver
Letter-Spacing:9px
word-spacing normal
<lenght>
 Alla element Ja - Bestämmer avståndet mellan ord
word-Spacing:30px
line-height normal
<lenght>
<percentage>
 Alla element Ja Relativ font-size Bestämmer avståndet mellan raderna
line-height:300%
line-height:300%
text-align
left
right
center
justify
<string>
 Blockelement Ja - Bestämmer textens position till förhållande till marginalerna
text-align:center
text-align:left
text-align:right
text-align:justify
text-decoration none
underline
overline
line-through
blink
 Alla element Ja - Ger texten sin dekoration
text-decoration:underline
text-decoration:overline
text-decoration:line-trough
text-decoration:blink
text-shadow none
<color>
<length>
 Alla element nej - Ger text skugga, stöds inte av någon browser
text-shadow:blue 12px 12px 2px
text-indent
<lenght>
<percentage>
 Blockelement ja referarer till parent bredd Gör så att texten bli indragen
text-indent:1in
text-indent:3em
text-indent:15%
text-transform none
capitalize
uppercase
lowercase
 Alla element ja - kontrollerar bokstäverna i ett element
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase
white-space normal
pre
nowrap
 Blockelement ja - Bestämmer hur texten skall behandlas/space, tabbar och radbrytning
white-space:pre
white-space:nowrap
Listor
Egenskap Värde XHTML element Arv % Beskrivning Exempel
list-style se nedan tilldelas element med display Ja Se nedan Ger egenskaper till listorna list-style-type, list-style-position, list-style-image
  • list-style:lower-roman url("dingbat.gif");
list-style-image none <url> tilldelas element med display Ja - Ger punkten sin bild som används i listan
  • list-style-image:url("dingbat.gif");
list-style-position inside
outside
 tilldelas element med display Ja - bestämmer hur listan ska placeras runt listan
  • list-style-position:inside
  • list-style-position:outside
list-style-type none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
 tilldelas element med display Ja - sätter utseedet på listmarkeringen(list-item)
  • list-style-type:disc;
  • list-style-type:square;
  • list-style-type:circle;
  • list-style-type:decimal;
  • list-style-type:decimal-leader-zero
  • list-style-type:lower-roman
  • list-style-type:upper-roman
  • list-style-type:lower-alpha
  • list-style-type:lower-latin
  • list-style-type:upper-alpha
  • list-style-type:upper-latin
  • list-style-type:lower-greek
  • list-style-type:hebrew
  • list-style-type:armenian
  • list-style-type:georgian
  • list-style-type:hirigana
  • list-style-type:cjk-ideographic
  • list-style-type:katanka
  • list-style-type:hirigana-iroha
  • list-style-type:katekane-iroha
marker-offset auto
length
 De med display satt till marker nej - sätter listpunktens position. stöds inte av IE och Mozilla marker-offset: 15px;
Färg
Egenskap Värde XHTML element Arv % Beskrivning Exempel
color <color> Alla Element ja - sätter färgen på elementen color:green
Synlighet
Egenskap Värde XHTML element Arv % Beskrivning Exempel
visibility visible
hidden
 Alla Element ja - Bestämmer om ett element ska synas eller ej visibility: visible
clip Auto
<shape>
inherit
 Blockelement nej - Bestämmer hur mycket som ska visas av ett element
position:absolute; clip:rect(15px 70px 40px 20px)
sko
display none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
 Alla element nej - Bestämmer vad och hur ett element ska visas
display: block
display: inline
display: list-item
display: run-in
display: compact
display: marker
display: table
display: inline-table
display: table-row-group
display: table-header-group
display: table-footer-group
display: table-row
display: table-column-group
overflow visible
hidden
scroll
auto
 Blockelement nej - Bestämmer vad som händer den info som inte får plats i den givna arean
overflow: visible; overflow: visible; overflow: visible; overflow: visible; overflow: visible; overflow: visible; overflow: visible; overflow: visible;

overflow: Hidden; overflow: Hidden; overflow: Hidden; overflow: Hidden; overflow: Hidden; overflow: Hidden; overflow: Hidden;overflow: Hidden;width:150px;
overflow: scroll; overflow: scroll; overflow: scroll; overflow: scroll; overflow: scroll; overflow: scroll;overflow: scroll; overflow: scroll;
overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto overflow:auto
Bakgrund
Egenskap Värde XHTML element Arv % Beskrivning Exempel
Backgroound se nedan Alla Element nej se nedan Bestämmer bakgrunden på elementen. background-image, backgrund-attachment, background-color, background-position och background-repeat.
background= #6495ed
Backgroound-image none
url
 Alla Element nej - Bestämmer bakgrunden på elementen.
background-image= dingbat.gif
backgrund-color transparent
<color>
 Alla Element nej - Bestämmer bakgrundsfärgen på elementen.
background-color=#9872ed
backgrund-position
<procent>
<lenght>
top
left
center
bottom
right
 Alla Element nej Refererar till elementet själv Bestämmer positionen på bakgrundsbilden
background-position: top left
backgrund-repeat
repeat
repeat-x
repeat-y
no-repeat
 Alla Element nej - Bestämmer om och hur en bakgrundsbild ska repeteras
background-repeat: repeat-x
background-repeat: repeat
background-repeat: repeat-y
background-repeat: no-repeat
Marginaler
Egenskap Värde XHTML element Arv % Beskrivning Exempel
margin se nedan Alla Element nej Refererar till bredden i blocket Övergripande egenskap för marginalerna som bestämmer margin-left, margin-right, margin-top och margin-bottom.
margin: 30px
margin-top auto
<lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer den övre marginalen
margin-top: 50px
margin-right auto
<lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer den högra marginalen
margin-right: 3cm
margin-bottom auto
<lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer den nedre marginalen
margin-bottom: 4%
margin-bottom auto
<lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer den nedre marginalen
margin-left: 8pc
Kantlinjer
Egenskap Värde XHTML element Arv % Beskrivning Exempel
border Se border-color, border-style och border-width Alla Element nej - egenskaper för kantlinjerna som bestämmer färg, form och tjocklek på border.
border: thin dotted maroon
border-top Se border-color, border-style och border-width Alla Element nej - bestämmer färg, form och tjocklek för den övre kanten.
border-top: thin dotted maroon
border-right Se border-color, border-style och border-width Alla Element nej - bestämmer färg, form och tjocklek för den högra kanten.
border-right: none
border-right Se border-color, border-style och border-width Alla Element nej - bestämmer färg, form och tjocklek för den undre kanten.
border-bottom: none
border-right Se border-color, border-style och border-width Alla Element nej - bestämmer färg, form och tjocklek för den vänstra kanten.
border-bottom: none
Padding
Egenskap Värde XHTML element Arv % Beskrivning Exempel
Padding <lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer padding-top, padding-right, padding-bottom och padding-left. Anger avståndet mellan element och kantlinje
padding: 0.4cm 1.5cm 1.5cm 1.4cm;
Padding-top <lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer avståndet till den övre kantlinjen
padding-top: 10px
Padding-right <lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer avståndet till den högra kantlinjen
padding-right: 15mm
Padding-bottom <lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer avståndet till den nedre kantlinjen
padding-bottom: 3ex
Padding-left <lenght>
<%>
 Alla Element nej Refererar till bredden i blocket bestämmer avståndet till den vänstra kantlinjen
padding-bottom: 4pc
Tabeller
Egenskap Värde XHTML element Arv % Beskrivning Exempel
table-layout <auto>
<fixed>
 tabeller nej - bestämmer hur tabellen ska placeras ut
table-layout:fixed;
border-collapse <collapse>
<separate>
 tabeller nej - bestämmer hur tabellen ska placeras ut. Funkar inte i IE
border-collapse: separate
border-collapse: collapse
Storlek
Egenskap Värde XHTML element Arv % Beskrivning Exempel
width auto
<lenght>
<%>
 Block nej Refererar till föräldern bestämmer bredden på ett element dingbat.gif
height auto
<lenght>
 Block nej - bestämmer höjden på ett element dingbat.gif
vertical-align
<lenght>
<%>
baseline
sub
super
top
text-top
middle
bottom
text-bottom
 inline element nej Refererar till line-height hos elemetet självt. Bestämmer den vertikala placeringen av ett element i förhållande till ett tidigare element.
vertical-align: baselinedingbat.gif

vertical-align: subdingbat.gif

vertical-align: superdingbat.gif

vertical-align: topdingbat.gif

vertical-align: text-topdingbat.gif

vertical-align: middledingbat.gif

vertical-align: bottomdingbat.gif

vertical-align: text-bottomdingbat.gif
Position
Egenskap Värde XHTML element Arv % Beskrivning Exempel
position static
relativ
absolute
fixed
 Alla element nej - bestämmer om element skav vara statisk ,relativ, absolute eller fixed

position: static

position: relativ

position: absolute

position: fixed
top auto
<lenght>
<%>
 Element med position ej static nej Relativt bredden eller höjden av blocket Bestämmer det övre avståndet mellan ett element och dess förälder.
top: 40px
left auto
<lenght>
<%>
 Element med position ej static nej Relativt bredden eller höjden av blocket Bestämmeravståndet till höger mellan ett element och dess förälder.
left: 400px
z-index auto
heltal
 Positionerade element. nej - Bestämmer i vilken ordning ett element skall placeras i z-led
sko